<template>
	<view class="app-container">
		<!-- 自定义导航栏 -->
		<up-navbar bgColor="transparent" title=" " titleStyle="color: #ffffff; font-size: 36rpx; font-weight: bold"
			:safeAreaInsetTop="true" :height="navbarHeightRpx" :customStyle="navbarContentStyle" :fixed="true">
			<template #left>
				<view class="nav-center" :style="navCenterStyle">
					<view class="nav-title-capsule">
						<FontIcon name="icon-dizhi" :size="28" color="#000000"></FontIcon>
						<text class="nav-title-text">目的地参营</text>
						<FontIcon name="icon-zhankai_xiala_xiajiantou" :size="18" color="#000000"></FontIcon>
					</view>
				</view>
			</template>
			<!-- <template #center>
				<view class="nav-center">
					<view class="nav-title-capsule">
						<FontIcon name="icon-address" :size="32" color="#000000"></FontIcon>
						<text class="nav-title-text">目的地参营</text>
						<FontIcon name="icon-address" :size="32" color="#000000"></FontIcon>
					</view>
				</view>
			</template> -->
			<template #right>
				<view class="nav-right" :style="navRightStyle">
					<view class="nav-action-btn nav-action-btn-circle" @click="handleSearch">
						<FontIcon name="icon-search" :size="28" color="#000000"></FontIcon>
					</view>
					<!-- <view class="nav-action-btn nav-action-btn-rect" @click="handleMore">
						<view class="more-dots">
							<view class="dot"></view>
							<view class="dot"></view>
							<view class="dot"></view>
						</view>
						<FontIcon name="icon-address" :size="24" color="#000000"></FontIcon>
					</view> -->
				</view>
			</template>
			
		</up-navbar>

		<!-- 内容区域 -->
		<view class="content-area">
			<view class="map-placeholder">
				<!-- TODO: replace with actual map component -->
			</view>
			<view class="category-content-wrapper">
				<!-- 搜索框 -->
				<!-- <view class="search-container">
					<up-input v-model="searchKeyword" placeholder="搜索分类商品" :border="false" :clearable="true"
						class="search-input" @input="handleSearchInput" />
				</view> -->

				<!-- 主内容区 -->
				<view class="category-page">
					<!-- 分类导航 -->
					<view class="category-grid">
						<view v-for="(item, index) in categoryList" :key="item.id || index"
							class="category-item"
							:class="{ 'active': activeCategory && activeCategory.id === (item.id || index) }"
							@click="handleCategoryClick(item, index)">
							<view class="icon-container">
								<FontIcon :name="item.icon" :size="32"></FontIcon>
							</view>
							<text class="grid-text"
								:style="{ color: activeCategory && activeCategory.id === (item.id || index) ? '#fff' : '#666' }">
								{{ item.title }}
							</text>
						</view>

						<view class="filter-container">
							<view class="filter-item" @tap="crowdAndThemePopup = true">
								<text class="filter-item-name">人群/主题</text>
								<FontIcon name="icon-zhankai_xiala_xiajiantou" :size="18"></FontIcon>
							</view>
						
							<view class="filter-item" @tap="navToDistrict()">
								<text class="filter-item-name">目的地 </text>
								<FontIcon name="icon-zhankai_xiala_xiajiantou" :size="18"></FontIcon>
							</view>
						
							<view class="filter-item" @tap="navToDaysCalendar()">
								<text class="filter-item-name">天数/日期</text>
								<FontIcon name="icon-zhankai_xiala_xiajiantou" :size="18"></FontIcon>
							</view>
						
							<view class="filter-item">
								<!-- 					<text class="filter-item-name">推荐排序</text>
								<uni-icons :type="crowdAndThemePopup ? 'bottom' : 'top'"></uni-icons> -->
						
								<uni-data-select class="filter-select" v-model="selectedRecommend" :localdata="recommendRange" mode="none"
									:clear="false" :hideRight="true"></uni-data-select>
								<FontIcon name="icon-zhankai_xiala_xiajiantou" :size="18"></FontIcon>
							</view>
						</view>
					</view>

					<!-- 分类内容区域 -->
					<view class="category-content" v-if="activeCategory">
						<!-- 商品列表 - 使用ProductCard组件 -->
						<view class="products-container">
							<!-- 添加额外的包裹元素并将v-for移到这里 -->
							<view v-for="product in categoryProducts" :key="product.id" class="product-item"
								@click="handleProductClick(product)">
								<product-card :info="product" :show-top-info="false" :show-date-select="true"></product-card>
							</view>
						</view>

						<!-- 加载更多 -->
						<view class="load-more" v-if="hasMoreProducts" @click="loadMoreProducts">
							<text>点击加载更多</text>
						</view>

						<!-- 无商品提示 -->
						<view class="empty-tip" v-else-if="!hasMoreProducts && categoryProducts.length === 0">
							<image src="/static/empty.png" class="empty-icon"></image>
							<text class="empty-text">暂无相关商品</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 自定义tabbar -->
		<CustomTabBar></CustomTabBar>
	</view>
</template>

<script>
import { updateTabBarSelected } from '@/utils/tabBarUtil';
import GlobalTopNav from '@/components/GlobalTopNav.vue';
import ProductCard from '@/components/ProductCard.vue';
import CustomTabBar from '@/components/CustomTabBar.vue';
import { request } from '@/utils/request';
import { mergeAllProducts } from '@/utils/productUtil';

export default {
	components: {
		GlobalTopNav,
		ProductCard,
		CustomTabBar
	},
	data() {
		return {
			// 胶囊按钮相关
			navRightPadding: '180rpx', // 动态计算的右侧边距
			capsuleInfo: {}, // 胶囊按钮信息（完整信息）
			statusBarHeight: 0, // 状态栏高度（px）
			navbarHeight: 44, // 导航栏高度（px）
			systemInfo: {}, // 系统信息，用于机型适配
			// 搜索关键词
			searchKeyword: '',
			// 搜索防抖定时器
			searchTimer: null,
			// 分类列表
			categoryList: [
				{ id: 1, title: '全部', icon: 'icon-quanbu' },        // 所有分类 -> 九宫格
				{ id: 2, title: '游学', icon: 'icon-dizhi' },         // 游学 -> 地图
				{ id: 3, title: '约票', icon: 'icon-yuepiao' },      // 约票 -> 票券
				{ id: 4, title: '课程', icon: 'icon-tushu' },        // 课程 -> 书本
				{ id: 5, title: '托管', icon: 'icon-tuoguan1' }         // 托管 -> 房子/家
			],
			// 当前选中的分类
			activeCategory: null,
			// 分类商品列表
			categoryProducts: [],
			// 当前页码
			currentPage: 1,
			// 是否还有更多商品
			hasMoreProducts: true,
			
			
			crowdAndThemePopup: false,
			selectedCrowdAndThemeData: null,
			
			daysCalendarPopup: false,
			
			selectedRecommend: '推荐排序',
			recommendRange: [{
					value: "推荐排序",
					text: "推荐排序"
				},
				{
					value: "好评优先",
					text: "好评优先"
				},
				{
					value: "团量优先",
					text: "团量优先"
				},
				{
					value: "销量优先",
					text: "销量优先"
				},
				{
					value: "低价优先",
					text: "低价优先"
				},
			],
		};
	},
	computed: {
		// 导航栏左侧样式（与胶囊按钮对齐）
		navLeftStyle() {
			// 参照 AdaptiveNavBar 的方式，使用胶囊按钮高度
			const capsuleHeight = (this.capsuleInfo && this.capsuleInfo.height) ? this.capsuleInfo.height : 32;
			
			return {
				height: capsuleHeight + 'px',
				lineHeight: capsuleHeight + 'px',
				display: 'flex',
				alignItems: 'center',
				justifyContent: 'flex-start'
			};
		},
		// 导航栏中间样式（与胶囊按钮对齐）
		navCenterStyle() {
			// 参照 AdaptiveNavBar 的方式，使用胶囊按钮高度
			const capsuleHeight = (this.capsuleInfo && this.capsuleInfo.height) ? this.capsuleInfo.height : 32;
			
			return {
				height: capsuleHeight + 'px',
				lineHeight: capsuleHeight + 'px',
				display: 'flex',
				alignItems: 'center',
				justifyContent: 'flex-start'
			};
		},
		// 导航栏右侧样式
		navRightStyle() {
			// 参照 AdaptiveNavBar 的方式，使用胶囊按钮高度
			const capsuleHeight = (this.capsuleInfo && this.capsuleInfo.height) ? this.capsuleInfo.height : 32;
			
			return {
				marginRight: this.navRightPadding,
				height: capsuleHeight + 'px',
				display: 'flex',
				alignItems: 'center',
				justifyContent: 'flex-end'
			};
		},
		// u-navbar__content 样式（与胶囊按钮上下居中，适配不同机型）
		navbarContentStyle() {
			try {
				// 如果还没有初始化系统信息，先初始化
				if (!this.systemInfo || Object.keys(this.systemInfo).length === 0) {
					this.initSystemInfo();
				}
				
				if (!this.capsuleInfo || !this.capsuleInfo.height || !this.capsuleInfo.top) {
					// 如果获取不到胶囊按钮信息，使用默认值
					return {
						height: this.navbarHeight + 'px',
						display: 'flex',
						alignItems: 'center',
						justifyContent: 'space-between'
					};
				}
				
				// 参照 AdaptiveNavBar 的方式，计算胶囊按钮的垂直位置（相对于导航栏内容区域）
				// 胶囊按钮的 top 是相对于窗口的，需要减去状态栏高度
				const capsuleTopOffset = this.capsuleInfo.top - this.statusBarHeight;
				
				// 通过 paddingTop 和 paddingBottom 来调整内容区域的垂直对齐
				// 使内容区域与胶囊按钮在同一水平线上
				return {
					height: this.navbarHeight + 'px',
					display: 'flex',
					alignItems: 'center',
					justifyContent: 'space-between',
					paddingTop: capsuleTopOffset + 'px',
					paddingBottom: capsuleTopOffset + 'px',
					boxSizing: 'border-box'
				};
			} catch (e) {
				console.warn('计算导航栏内容样式失败:', e);
				return {
					height: this.navbarHeight + 'px',
					display: 'flex',
					alignItems: 'center',
					justifyContent: 'space-between'
				};
			}
		},
		// 导航栏高度（rpx），参照 AdaptiveNavBar 的计算方式
		navbarHeightRpx() {
			try {
				if (!this.systemInfo || Object.keys(this.systemInfo).length === 0) {
					this.initSystemInfo();
				}
				
				const systemInfo = this.systemInfo;
				const windowWidthPx = systemInfo.windowWidth || 375;
				const pixelRatio = 750 / windowWidthPx;
				
				// 将导航栏高度（px）转换为 rpx
				return (this.navbarHeight * pixelRatio) + 'rpx';
			} catch (e) {
				console.warn('计算导航栏高度失败:', e);
				return '88rpx'; // 默认值
			}
		},
		// 安全区域高度（rpx），状态栏高度 + 导航栏高度
		safeAreaHeightRpx() {
			try {
				const GM_STATUS_BAR_HEIGHT = uni.getStorageSync('GM_STATUS_BAR_HEIGHT') || 0;
				
				if (!this.systemInfo || Object.keys(this.systemInfo).length === 0) {
					this.initSystemInfo();
				}
				
				const systemInfo = this.systemInfo;
				const windowWidthPx = systemInfo.windowWidth || 375;
				const pixelRatio = 750 / windowWidthPx;
				
				// 将 px 转换为 rpx
				const navbarHeightRpx = this.navbarHeight * pixelRatio;
				
				return GM_STATUS_BAR_HEIGHT + navbarHeightRpx;
			} catch (e) {
				console.warn('计算安全区域高度失败:', e);
				return 88; // 默认值
			}
		}
	},
	onLoad() {
		console.log('分类页面加载');
		// 初始化系统信息（用于机型适配）
		this.initSystemInfo();
	},
	mounted() {
		// 延迟计算，确保胶囊按钮信息已加载
		this.$nextTick(() => {
			setTimeout(() => {
				this.calculateNavRightPadding();
			}, 200);
		});
	},
	onReady() {
		// 页面渲染完成后再次计算，确保能获取到胶囊按钮信息
		setTimeout(() => {
			this.calculateNavRightPadding();
		}, 300);
	},
	onShow() {
		// 隐藏原生 tabbar，显示自定义 tabbar
		try {
			uni.hideTabBar({ animation: false });
		} catch (e) {
			// 忽略错误
		}
		// 设置当前tabBar选中项
		updateTabBarSelected.call(this, 1);
		// 重新计算导航栏右侧边距（页面显示时）
		this.calculateNavRightPadding();

		// 确保tabBar列表已更新
		// if (typeof this.getTabBar === 'function' && this.getTabBar()) {
		// 	const app = getApp();
		// 	if (app.globalData && app.globalData.tabBarList) {
		// 		this.getTabBar().setData({
		// 			list: app.globalData.tabBarList
		// 			});
		// 	}
		// }

		// 如果没有选中的分类，默认选中第一个
		if (!this.activeCategory && this.categoryList.length > 0) {
			this.activeCategory = this.categoryList[0];
			// 加载分类商品
			this.loadCategoryProducts();
		}
	},
	methods: {
		/**
		 * 返回按钮
		 */
		handleBack() {
			uni.navigateBack();
		},

		/**
		 * 搜索按钮
		 */
		handleSearch() {
			uni.showToast({
				title: '搜索功能',
				icon: 'none'
			});
		},

		/**
		 * 更多选项按钮
		 */
		handleMore() {
			uni.showToast({
				title: '更多功能',
				icon: 'none'
			});
		},

		/**
		 * 处理搜索输入（防抖）
		 */
		handleSearchInput() {
			// 防抖处理搜索
			if (this.searchTimer) {
				clearTimeout(this.searchTimer);
			}

			this.searchTimer = setTimeout(() => {
				// 重置页码和商品列表
				this.currentPage = 1;
				this.categoryProducts = [];
				this.hasMoreProducts = true;

				// 加载商品数据
				this.loadCategoryProducts();
			}, 500);
		},

		/**
		 * 处理分类点击
		 */
		handleCategoryClick(category, index) {
			// 如果点击的是当前选中的分类，则不处理
			if (this.activeCategory && this.activeCategory.id === category.id) {
				return;
			}

			// 更新选中的分类
			this.activeCategory = category;
			// 重置页码和商品列表
			this.currentPage = 1;
			this.categoryProducts = [];
			this.hasMoreProducts = true;
			// 加载分类商品
			this.loadCategoryProducts();
		},

		/**
		 * 处理商品卡片点击
		 */
		handleProductClick(product) {
			console.log('点击商品:', product);
			const id = product.mainInfo.productSpu.id;
			// 跳转到商品详情页
			uni.navigateTo({
				url: `/public/productInfo/productInfo?spuId=${id}&mode=customer`
			});
		},

		/**
		 * 加载分类商品
		 */
		async loadCategoryProducts() {
			// 显示加载动画
			uni.showLoading({
				title: '加载中...'
			});

			try {
				// 调用实际的API获取产品数据
				const response = await request({
					url: '/product-spu/getListByUser',
					method: 'GET',
					data: {
						categoryId: this.activeCategory?.id || '',
						keyword: this.searchKeyword.trim() || '',
						page: this.currentPage,
						pageSize: 10
					}
				});
				console.log(response);

				// 检查响应数据
				if (response.code === 200 && Array.isArray(response.data)) {
					// 使用productUtil.js处理数据
					const processedProducts = mergeAllProducts(response.data);

					// 更新商品列表 - 直接使用processedProducts
					if (this.currentPage === 1) {
						this.categoryProducts = processedProducts;
					} else {
						this.categoryProducts = [...this.categoryProducts, ...processedProducts];
					}

					// 判断是否还有更多数据
					this.hasMoreProducts = processedProducts.length === 10;

				} else {
					// 处理API返回错误
					uni.showToast({
						title: '数据加载失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('加载商品数据失败:', error);
				uni.showToast({
					title: '网络请求失败',
					icon: 'none'
				});
			} finally {
				// 隐藏加载动画
				uni.hideLoading();
			}
		},

		/**
		 * 加载更多商品
		 */
		loadMoreProducts() {
			if (!this.hasMoreProducts) {
				return;
			}

			this.currentPage++;
			this.loadCategoryProducts();
		},

		/**
		 * 从产品特色中提取标签
		 */
		extractTags(features) {
			const tags = [];
			if (features && features.length > 0) {
				// 从特色文本中提取简短标签
				features.forEach(feature => {
					if (feature.type === 'text' && feature.alt && tags.length < 2) {
						const shortTag = feature.alt.substring(0, 4);
						tags.push(shortTag);
					}
				});
			}
			return tags.length > 0 ? tags : ['新品'];
		},

		/**
		 * 初始化系统信息（参照 AdaptiveNavBar 的方式）
		 */
		initSystemInfo() {
			try {
				// 获取系统信息
				this.systemInfo = uni.getSystemInfoSync();
				
				// 设置状态栏高度
				this.statusBarHeight = this.systemInfo.statusBarHeight || 0;
				
				// 获取胶囊按钮信息
				this.capsuleInfo = uni.getMenuButtonBoundingClientRect();
				console.log('胶囊按钮信息:', this.capsuleInfo);
				
				// 计算导航栏高度（参照 AdaptiveNavBar 的方式）
				this.calculateNavbarHeight();
				
				console.log('系统信息初始化成功:', {
					systemInfo: this.systemInfo,
					statusBarHeight: this.statusBarHeight,
					capsuleInfo: this.capsuleInfo,
					navbarHeight: this.navbarHeight
				});
			} catch (e) {
				console.error('获取系统信息失败:', e);
				// 设置默认值
				this.systemInfo = {};
				this.statusBarHeight = 20;
				this.capsuleInfo = {
					left: 10,
					right: 10,
					top: 10,
					bottom: 10,
					width: 87,
					height: 32
				};
				this.navbarHeight = 44;
			}
		},
		/**
		 * 计算导航栏高度（参照 AdaptiveNavBar 的方式）
		 */
		calculateNavbarHeight() {
			if (this.capsuleInfo && this.capsuleInfo.height && this.capsuleInfo.top) {
				// 胶囊按钮高度 + (胶囊top - 状态栏高度) * 2
				this.navbarHeight = this.capsuleInfo.height + (this.capsuleInfo.top - this.statusBarHeight) * 2;
			} else {
				// 默认高度
				this.navbarHeight = 44;
			}
			console.log('导航栏高度计算:', {
				capsuleHeight: this.capsuleInfo?.height,
				capsuleTop: this.capsuleInfo?.top,
				statusBarHeight: this.statusBarHeight,
				navbarHeight: this.navbarHeight
			});
		},
		/**
		 * 计算导航栏右侧边距（使用胶囊按钮宽度 + 40）
		 */
		calculateNavRightPadding() {
			try {
				// 获取系统信息
				const systemInfo = uni.getSystemInfoSync();
				
				// 获取胶囊按钮信息
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				
				console.log('=== 计算导航栏右侧边距 ===');
				console.log('系统信息:', systemInfo);
				console.log('胶囊按钮信息:', menuButtonInfo);
				
				if (!menuButtonInfo || !systemInfo) {
					console.warn('胶囊按钮或系统信息获取失败');
					this.navRightPadding = '180rpx';
					return;
				}
				
				// 检查胶囊按钮width是否有效
				if (menuButtonInfo.width === undefined || menuButtonInfo.width === null) {
					console.warn('胶囊按钮width属性无效:', menuButtonInfo);
					this.navRightPadding = '180rpx';
					return;
				}
				
				// 获取胶囊按钮宽度（px）
				const capsuleWidthPx = menuButtonInfo.width;
				
				// 转换为rpx：750rpx = systemInfo.windowWidth px
				const windowWidthPx = systemInfo.windowWidth;
				const pixelRatio = 750 / windowWidthPx;
				const capsuleWidthRpx = capsuleWidthPx * pixelRatio;
				
				// 右侧margin = 胶囊宽度
				this.navRightPadding = capsuleWidthRpx + 'rpx';
				
				// 更新胶囊按钮信息
				if (menuButtonInfo) {
					this.capsuleInfo = menuButtonInfo;
					// 重新计算导航栏高度
					this.calculateNavbarHeight();
					console.log('导航栏信息更新:', {
						capsuleInfo: this.capsuleInfo,
						navbarHeight: this.navbarHeight
					});
				}
				
				console.log('导航栏右侧边距计算成功:', {
					windowWidth: windowWidthPx,
					capsuleWidth: capsuleWidthPx,
					capsuleWidthRpx: capsuleWidthRpx,
					rightMargin: this.navRightPadding
				});
				
				// 强制更新视图
				this.$forceUpdate();
			} catch (e) {
				console.error('计算导航栏右侧边距失败:', e);
				this.navRightPadding = '180rpx'; // 默认值
			}
		},

		/**
		 * 从行程中提取日期信息
		 */
		extractDate(itineraries) {
			if (itineraries && itineraries.length > 0 && itineraries[0].details && itineraries[0].details.length > 0) {
				const firstItinerary = itineraries[0].details[0];
				if (firstItinerary.time) {
					const timeParts = firstItinerary.time.split('~');
					return timeParts[0].split(' ')[0]; // 返回开始日期
				}
			}
			return '2023-06-15'; // 默认日期
		}
	}
};
</script>

<style lang="scss">
.app-container {
	width: 100%;
	min-height: 100vh;
	background-color: #f5f5f5;
}

.content-area {
	width: 100%;
}

.map-placeholder {
	width: 100%;
	height: 496rpx;
	background: url('/static/bgImage.png') center center / cover no-repeat;
	// border-bottom-left-radius: 32rpx;
	// border-bottom-right-radius: 32rpx;
}

.category-content-wrapper {
	width: 100%;
}

/* 导航栏样式 */
/* 调整 u-navbar__content 与胶囊按钮上下居中 */
:deep(.u-navbar__content) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* 根据胶囊按钮位置调整垂直对齐 */
	position: relative;
}

.nav-left {
	display: flex;
	align-items: center;
	padding-left: 32rpx;
	box-sizing: border-box;
}

.nav-back-btn {
	width: 64rpx;
	height: 64rpx;
	border-radius: 50%;
	background: rgba(255,255,255,0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.nav-center {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex: 1;
	// padding-left: 140rpx; /* 预留返回按钮位置：32rpx(左侧padding) + 64rpx(按钮宽度) + 24rpx(间距) */
}

.nav-title-capsule {
	display: flex;
	align-items: center;
	padding: 0rpx 24rpx;
	background: rgba(255,255,255,0.6);
	border-radius: 5000rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	gap: 8rpx;
}

.nav-title-text {
	font-size: 28rpx;
	color: #000000;
}

.nav-right {
	display: flex;
	align-items: center;
	gap: 12rpx;
	/* padding-right 通过动态样式绑定 */
	box-sizing: border-box;
}

.nav-action-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,0.6);
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	transition: all 0.2s ease;
}

.nav-action-btn:active {
	opacity: 0.7;
	transform: scale(0.95);
}

.nav-action-btn-circle {
	width: 64rpx;
	height: 64rpx;
	border-radius: 50%;
}

.nav-action-btn-rect {
	height: 64rpx;
	padding: 0 20rpx;
	border-radius: 32rpx;
	gap: 8rpx;
	display: flex;
	align-items: center;
}

.more-dots {
	display: flex;
	align-items: center;
	gap: 4rpx;
	margin-right: 8rpx;
}

.dot {
	width: 6rpx;
	height: 6rpx;
	border-radius: 50%;
	background-color: #333;
}

.search-container {
	padding: 16rpx 24rpx;
	background-color: #fff;
	margin-top: 0;
}

.search-input {
	background-color: #f2f2f2;
	border-radius: 40rpx;
	padding-left: 30rpx;
}

.category-page {
	padding-bottom: 120rpx;
	background: #F8F8F8;
}

.category-grid {
	// background-color: #fff;
	padding: 20rpx;
	display: flex;
	flex-wrap: wrap;
	// gap: 16rpx 12rpx;
	justify-content: space-between;
	margin-top:10rpx;
}

.category-item {
	text-align: center;
	width: 116rpx;
	height: 136rpx;
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-direction: column;
	border-radius: 20rpx;
	color: #666;
	background: #F2F2F2;
	flex: 0 0 calc(20% - 12rpx);
}

.category-item.active{
	background-color: #fa662d;
	color: #fff;
}

.icon-container {
	border-radius: 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	// margin-bottom: 5px;
	color: inherit;
	padding-top: 10rpx;
}

.icon-container.active {
	background-color: #e6f4ff;
}

.grid-text {
	font-size: 24rpx;
	color: #333;
	padding-bottom: 10rpx;
}

.category-content {
	margin-top: 20rpx;
}

.products-container {
	padding: 0 24rpx;
}

.load-more {
	text-align: center;
	padding: 30rpx;
	color: #999;
	font-size: 28rpx;
}

.empty-tip {
	text-align: center;
	padding: 120rpx 0;
}

.empty-icon {
	width: 160rpx;
	height: 160rpx;
	margin-bottom: 20rpx;
}

.empty-text {
	color: #999;
	font-size: 28rpx;
}


.filter-container {
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10rpx;
	font-size: 14px;
	// padding: 0 20rpx;
	color: #333;
	width: 100%;
	margin-top: 12rpx;
}

.filter-item {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5rpx;
	height: 72rpx;
	// padding: 0 24rpx;
	border-radius: 36rpx;
	// background: #F2F2F2;
	color: #333;
}

.filter-item-name{
	font-size:24rpx;
	flex-shrink: 0;
}

.filter-select {
	flex: 1;
}

.filter-select .uni-stat-box,
.filter-select .uni-select {
	background-color: transparent;
	box-shadow: none;
	border: none;
}

.filter-select .uni-select {
	padding: 0;
}

.filter-select .uni-select__input-box {
	padding: 0;
	justify-content: flex-end;
}

.filter-select {
	:deep(.uni-select__input-box) {
		padding: 0;
		justify-content: flex-end;
	}

	:deep(.padding-top-bottom) {
		width: 100%;
		text-align: right;
		display: inline-block;
	}

	:deep(.align-left),
	:deep(.align-center) {
		text-align: right !important;
	}

	:deep(.uni-select__selector) {
		width: 170rpx !important;
	}

	:deep(.uni-select__input-text),
	:deep(.uni-select__input-placeholder) {
		font-size: 24rpx;
		text-align: right;
		width: 100%;
	}

	:deep(.uni-select__input-text) {
		color: #333;
	}

	:deep(.uni-select__input-placeholder) {
		color: #999;
	}
}
</style>